import styles from './styles.less';
import {Button, Modal} from 'antd';
import {useAccess, Access, connect} from 'umi';
import {ExclamationCircleFilled} from '@ant-design/icons';

const Opera = (props) => {

  const {submitting, dispatch} = props;
  const {
    setDataForm,
    selectedRowKeys,
    setSelectedRowKeys,
    tablePayload,
    setTablePayload,
    goodsTablePayload,
    setGoodsTablePayload
  } = props.data;
  const access = useAccess();

  /* 新增操作 */
  function add(e) {
    e.preventDefault();
    setDataForm({
      visible: true,
      title: '添加操作',
      data: undefined,
    });
  }

  /* 删除数据 */
  function del(e) {
    e.preventDefault();
    if (!submitting) {
      Modal.confirm({
        title: '提示',
        icon: <ExclamationCircleFilled/>,
        content: '是否确定删除数据？',
        onOk() {
          dispatch({
            type: 'PMallGoodsSpecs/del',
            payload: selectedRowKeys,
            callback: () => {
              setTablePayload({...tablePayload, pageNum: 1});
              setGoodsTablePayload({...goodsTablePayload});
              setSelectedRowKeys([]);
            },
          });
        },
      });
    }
  }

  return (
    <div className={styles.myOperaAction}>
      <div className={styles.leftContent}>
        <Access accessible={access?.mall_goodsSpec_add ?? false}>
          <Button type='primary' onClick={add}>
            新增操作
          </Button>
        </Access>
        <Access accessible={access?.mall_goodsSpec_del ?? false}>
          <Button type='primary' danger loading={submitting} onClick={del} disabled={selectedRowKeys.length <= 0}>
            {`删除 ${selectedRowKeys.length} 项`}
          </Button>
        </Access>
      </div>
    </div>
  );
};

export default connect(({loading}) => {
  return {
    submitting: loading.effects['PMallGoodsSpecs/add'],
  };
})(Opera);

